<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>幻兽小店--你想要的我都有</title>
    <meta name="pet_shop" content=" 幻兽小店-奇迹、资源、蛋巢应有尽有!" />
    <link rel="shortcut icon" href="{% static 'app_icon.ico' %}">
    <link rel="stylesheet" href="{% static 'pet_web/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'pet_web/css/common.css' %}">
    <style type="text/css">
        body{min-height:2000px;padding-top:70px;}

        .navbar-default{background-color:#4c00ff52;border-color:#e7e7e7;}
        .navbar-default .navbar-brand{color:#fff;}
        .navbar-default .navbar-nav > li > a,.navbar-default .navbar-nav > li > a:visited {
            color: #fff;
            width:100px;
            font-size:14px;
            text-align:center;
        }
        .navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:visited,.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-nav > .active > a:hover,.navbar-default .navbar-nav li a:active {
            color:#fff;
            background-color: #ff320794;
            width:100px;
            font-size:14px;
            text-align:center;
        }
        
        table tr td{font-size:11px;} 
        table tr td.price{color:red;}
        table tr td.num span{color:red;padding:0px 5px}
        table tr td.num i{border-width:0px;background-color:#ddd;}  

        div.shoplist div.bn{font-size:12px;line-height:25px;}
        div.shoplist div.bn span.price{color:red;}

    </style>
</head>
<body>
<!-- 页头导航开始 -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <span class="glyphicon glyphicon-fire" aria-hidden="true" style="color:red"></span>
                <span style="font-weight:bold;">幻兽小店</span>
                <span style="font-size:14px;">（团子店）</span></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">物品下单</a></li>
                <li><a href="#about">购物车</a></li>
                <li><a href="#contact">历史订单</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="../navbar/">
                        <span class="glyphicon glyphicon-user" aria-hidden="true"> {{ request.session.webUser.user_name }}</span>
                    </a>
                </li>
                <li><a href="{% url 'web_logout' %}">退出</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
<!-- 页头导航结束 -->

<!-- 页面主体开始 -->
<div class="container">
    <div class="col-md-4">
        <div class="panel panel-warning">
            <div class="panel-heading"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 购 物 车
            </div>
            <table class="table table-striped">
                <tr>
                    <th width="30">序</th>
                    <th>菜品</th>
                    <th width="72">数量</th>
                    <th width="45">单价</th>
                    <th>删除</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>梅菜扣肉+番茄鸡蛋</td>
                    <td class="num"><i class="btn btn-default btn-xs"> - </i><span>1</span><i
                            class="btn btn-default btn-xs"> + </i></td>
                    <td class="price">38.00</td>
                    <td><a href="#" class="btn btn-danger btn-xs" role="button">删除</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>梅菜扣肉</td>
                    <td class="num"><i class="btn btn-default btn-xs"> - </i><span>1</span><i
                            class="btn btn-default btn-xs"> + </i></td>
                    <td class="price">25.00</td>
                    <td><a href="#" class="btn btn-danger btn-xs" role="button">删除</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>梅菜扣肉</td>
                    <td class="num"><i class="btn btn-default btn-xs"> - </i><span>1</span><i
                            class="btn btn-default btn-xs"> + </i></td>
                    <td class="price">25.00</td>
                    <td><a href="#" class="btn btn-danger btn-xs" role="button">删除</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>梅菜扣肉</td>
                    <td class="num"><i class="btn btn-default btn-xs"> - </i><span>1</span><i
                            class="btn btn-default btn-xs"> + </i></td>
                    <td class="price">25.00</td>
                    <td><a href="#" class="btn btn-danger btn-xs" role="button">删除</a></td>
                </tr>
            </table>

            <li class="list-group-item">
                <b>购买方式: &nbsp; </b>
                <input type="radio" name="ptype" checked value="1"> 堂吃 &nbsp;
                <input type="radio" name="ptype" value="2"> 打包 &nbsp;
            </li>
            <li class="list-group-item">
                <b>支付方式: &nbsp; </b>
                <input type="radio" name="bank" checked value="1"> 现金 &nbsp;
                <input type="radio" name="bank" value="2"> 支付宝 &nbsp;
                <input type="radio" name="bank" value="3"> 微信
            </li>

            <div class="panel-footer" style="height:50px">
                <div style="width:120px;float:left;margin:5px 0px;">合计：￥<span
                        style="color:red;font-weight:bold;">168.00</span> 元
                </div>
                <button type="submit" class="btn btn-warning" style="width:130px;float:right">结 &nbsp; 算</button>
            </div>

        </div>
    </div>
    <div class="col-md-8">
        <!--标签页内容-->
        {% for key,good_type in goods %}
        <h5 style="padding-bottom:9px;border-bottom:1px solid #eee;color:#BB3D00">
            <span {% if good_type.type_id == 1001 %}
                    class="glyphicon glyphicon-gift" style="color: #0035ff"
                  {% elif good_type.type_id == 1002 %}
                    class="glyphicon glyphicon-fire" style="color: #ff0000"
                  {% elif good_type.type_id == 1003 %}
                   class="glyphicon glyphicon-leaf" style="color: #179000"
                  {% else %}
                   class="glyphicon glyphicon-globe"
                  {% endif %}
                  aria-hidden="true" >
                {{ good_type.type_name }}
            </span>
        </h5>
        <div class="row shoplist">
            {% for good in good_type.goods %}
            <div class="col-sm-6 col-md-3">
                <div class="thumbnail">
                    <img src="{% static '/uploads/goods_path/'%}{{ good.good_path }}" alt="..." >
                    <div class="caption">
                        <h6>{{ good.good_name }}</h6>
                        <div class="bn">￥<span class="price">{{ good.good_price }}</span>元</a>
                            <a href="#" class="btn btn-warning btn-xs pull-right" role="button"><span
                                    class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 购买</a></div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endfor %}


    </div>
</div>
<!-- 页面主体结束 -->

<script src="{% static 'pet_web/js/jquery.min.js' %}"></script>
<script src="{% static 'pet_web/js/bootstrap.min.js' %}"></script>

</body>
</html>